<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.title}} - PodGrab</title>
    {{template "commoncss" .}}
    <style>
      img {
        display: none;
      }


      h2,
      h3,
      h4,
      h5 {
        margin-bottom: 1rem;
      }
      h4 {
        font-size: 2rem;
      }

      h5 {
        font-size: 1.5rem;
      }
      p {
        margin-bottom: 0.5rem;
      }
      hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      .podcastItem .button {
        padding: 0 15px;
      }

      .IsPlayed-true {
        color: #555555;
      }

      /* Larger than tablet */
      @media (min-width: 750px) {
        img {
          display: block;
        }
      }
      .button-enqueue{
        display: none;
      }
      body.playerExists .button-enqueue{
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      {{template "navbar" .}}

      <br />{{$setting := .setting}} {{range .podcastItems}}

      <div class="podcasts row IsPlayed-{{ .IsPlayed }} podcastItem">
        <div class="columns two">
          <img
            onerror="onImageError(this)"
            class="u-full-width"
           src="/podcastitems/{{.ID}}/image"
            alt="{{ .Title }}"
            loading="lazy"
          />
        </div>
        <div class="columns ten">
          <div class="row">
            <div class="columns eight">
              <h4>
                {{if .IsPlayed }}<i
                  title="Played"
                  style="color: green"
                  class="fas fa-check-circle"
                ></i>
                {{end}} {{.Title}} {{if .Podcast.Title }} // {{ .Podcast.Title}}
                {{end}}
              </h4>
            </div>
            <div class="columns three">
              <small title="{{ formatDate .PubDate }}"
                >{{ naturalDate .PubDate }}</small
              >
            </div>
            <div class="columns one">
              <small> {{ formatDuration .Duration}}</small>
            </div>
          </div>

          <p class="useMore">{{ .Summary }}</p>

          {{if .IsPlayed }}
          <a
            class="button button"
            title="Mark as not listened"
            onclick="changePlayedStatus('{{.ID}}',{{ not .IsPlayed }})"
            ><i class="fas fa-envelope"></i
          ></a>
          {{ else }}
          <a
            class="button button"
            title="Mark as listened"
            onclick="changePlayedStatus('{{.ID}}',{{ not .IsPlayed }})"
            ><i class="fas fa-envelope-open"></i
          ></a>
          {{ end }}

          {{if isDateNull .BookmarkDate }}
          <a
            class="button button"
            title="Bookmark Episode"
            onclick="changeBookmarkStatus('{{.ID}}',true)"
            ><i class="far fa-bookmark"></i
          ></a>
          {{ else }}
          <a
            class="button button"
            title="Remove Bookmark"
            onclick="changeBookmarkStatus('{{.ID}}',false)"
            ><i class="fas fa-bookmark"></i
          ></a>

          {{ end }}

          {{if .DownloadPath}}
          <a
            class="button"
            href="/podcastitems/{{.ID}}/file"
            download
            title="Download episode file"
            ><i class="fas fa-download"></i
          ></a>
          <a
            class="button button"
            onclick="deleteFile('{{.ID}}')"
            title="Delete Podcast Episode File"
            ><i class="fas fa-trash"></i
          ></a>


          {{else}} {{if not $setting.AutoDownload}}
          <a
            class="button button"
            onclick="downloadToDisk('{{.ID}}')"
            title="Download to server"
            download
            ><i class="fas fa-cloud-download-alt"></i
          ></a>
          {{else}} {{if eq .DownloadStatus 3}}
          <a
            class="button button"
            onclick="downloadToDisk('{{.ID}}')"
            title="Download to server"
            download
            ><i class="fas fa-cloud-download-alt"></i
          ></a>
          {{end}} {{end}} {{end }}
          <a
          class="button button"
          onclick="openPlayer(['{{.ID}}'])"
          title="Play Episode"
          ><i class="fas fa-play"></i
        ></a>
        <a
        class="button button-enqueue"
        onclick="enqueueEpisode(['{{.ID}}'])"
        title="Add Episode to existing player playlist"
        ><i class="fas fa-plus"></i
      ></a>
        </div>
        <div class="columns one"></div>
      </div>
      <hr />
      {{else}}
      <div class="welcome">
      <p>
        <a href="/add">Click here</a> to add
        a new podcast to start downloading.
      </p>
    </div>
      {{end}}

      <div class="row">
        <div class="columns twelve" style="text-align: center">
          {{if .previousPage }}
          <a
            href="?page=1"
            class="button"
            >First</a
          >
          {{end}}
          {{if .previousPage }}
          <a
            href="?page={{.previousPage}}"
            class="button"
            >Previous</a
          >
          {{end}}

          <select name="page" id="pageDdl">
            {{ $page:=.page }}
            {{range $y := intRange 1 .totalPages}}
              <option {{if eq $page $y }} selected="selected" {{end}}}>{{$y}}</option>
            {{end}}
          </select>

          {{if .nextPage }}
          <a
            href="?page={{.nextPage}}"
            class="button"
            >Next</a
          >
          {{end}}
          {{if gt .totalPages .page }}

          <a
            href="?page={{.totalPages}}"
            class="button"
            >Last</a
          >
          {{end}}
        </div>
      </div>
    </div>

    {{template "scripts"}}
    <script>
      function downloadToDisk(id) {
        axios
          .get("/podcastitems/" + id + "/download")
          .then(function (response) {
            Vue.toasted.show("Podcast download enqueued.", {
              theme: "bubble",
              type: "info",
              position: "top-right",
              duration: 5000,
            });
            var row = document.getElementById("podcast-" + id);
            row.remove();
          })
          .catch(function (error) {
            if (error.response && error.response.data && error.response.data.message) {
              Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration: 5000,
              });
            }
          })
          .then(function () {});
        return false;
      }
      function deleteFile(id) {
        axios
          .get("/podcastitems/" + id + "/delete")
          .then(function (response) {
            Vue.toasted.show("Podcast file deleted.", {
              theme: "bubble",
              type: "success",
              position: "top-right",
              duration: 5000,
            });
            var row = document.getElementById("podcast-" + id);
            row.remove();
          })
          .catch(function (error) {
            if (error.response && error.response.data && error.response.data.message) {
              Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration: 5000,
              });
            }
          })
          .then(function () {});
        return false;
      }
      function changePlayedStatus(id, status) {
        var endpoint = status ? "markPlayed" : "markUnplayed";
        axios
          .get("/podcastitems/" + id + "/" + endpoint, {
            isPlayed: status,
          })
          .then(function (response) {
            Vue.toasted.show("Podcast played status updated.", {
              theme: "bubble",
              type: "info",
              position: "top-right",
              duration: 5000,
            });
            var row = document.getElementById("podcast-" + id);
            row.remove();
          })
          .catch(function (error) {
            if (error.response && error.response.data && error.response.data.message) {

              Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration: 5000,
              });
            }
          })
          .then(function () {});
        return false;
      }
      function changeBookmarkStatus(id, status) {
        var endpoint = status ? "bookmark" : "unbookmark";
        axios
          .get("/podcastitems/" + id + "/" + endpoint, {
            isPlayed: status,
          })
          .then(function (response) {
            msg= status?"Bookmark Added": "Bookmark removed";
            Vue.toasted.show(msg, {
              theme: "bubble",
              type: "info",
              position: "top-right",
              duration: 5000,
            });
            var row = document.getElementById("podcast-" + id);
            row.remove();
          })
          .catch(function (error) {
            if (error.response && error.response.data && error.response.data.message) {
              Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration: 5000,
              });
            }
          })
          .then(function () {});
        return false;
      }
      document.getElementById('pageDdl').addEventListener('change', function() {
        currentPage= {{.page}};
        if(parseInt(this.value)===currentPage){
          return;
        }
        var queryParams = new URLSearchParams(window.location.search);

          // Set new or modify existing parameter value.
          queryParams.set("page", this.value);

          window.top.location= window.top.location.origin+window.top.location.pathname+"?"+queryParams.toString();
      });
    </script>
    <script>

       const socket= getWebsocketConnection(function(event){
              const message= getWebsocketMessage("Register","Home")
              socket.send(message);
            },function(x){
              const msg= JSON.parse(x.data)
              if(msg.messageType=="NoPlayer"){
                document.body.classList.remove("playerExists")
              }
              if(msg.messageType=="PlayerExists"){
                document.body.classList.add("playerExists")
              }
            });
            function enqueueEpisode(id){
            if(!socket){
              return
            }
           socket.send(getWebsocketMessage("Enqueue",`{"itemIds":${JSON.stringify(id)}}`))
          }
          function enquePodcast(id){
            if(!socket){
              return
            }
            socket.send(getWebsocketMessage("Enqueue",`{"podcastId":"${id}"}`))
          }
          function playPodcast(id){
            openPlayer("",id)
          }
    </script>
  </body>
</html>
